<template>
  <el-dialog
    :model-value="visible"
    title="配置属性详情"
    width="600px"
    :before-close="handleClose"
    append-to-body
  >
    <div class="detail-content">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="属性名称">
          {{ data?.attributeName || '-' }}
        </el-descriptions-item>
        
        <el-descriptions-item label="属性标识">
          {{ data?.attributeIdentifier || '-' }}
        </el-descriptions-item>
        
        <el-descriptions-item label="数据类型">
          <el-tag :type="getDataTypeTagType(data?.attributeDataType)">
            {{ getDataTypeText(data?.attributeDataType) }}
          </el-tag>
        </el-descriptions-item>
        
        <el-descriptions-item label="是否必填">
          <el-tag :type="data?.isRequired ? 'danger' : 'info'">
            {{ data?.isRequired ? '是' : '否' }}
          </el-tag>
        </el-descriptions-item>
        
        <el-descriptions-item label="默认值">
          {{ data?.defaultValue || '-' }}
        </el-descriptions-item>
        
        <!-- 数值类型的范围显示 -->
        <template v-if="data?.attributeDataType === 'int' || data?.attributeDataType === 'float'">
          <el-descriptions-item label="数值范围">
            <span v-if="data?.minValue !== null || data?.maxValue !== null">
              {{ data?.minValue !== null ? data.minValue : '-∞' }} ~ 
              {{ data?.maxValue !== null ? data.maxValue : '+∞' }}
            </span>
            <span v-else>-</span>
          </el-descriptions-item>
        </template>
        
        <!-- 字符串类型的长度显示 -->
        <template v-if="data?.attributeDataType === 'string'">
          <el-descriptions-item label="长度范围">
            <span v-if="data?.minLength !== null || data?.maxLength !== null">
              {{ data?.minLength !== null ? data.minLength : '0' }} ~ 
              {{ data?.maxLength !== null ? data.maxLength : '无限制' }}
            </span>
            <span v-else>-</span>
          </el-descriptions-item>
        </template>
        
        <!-- 枚举类型的值显示 -->
        <template v-if="data?.attributeDataType === 'enum'">
          <el-descriptions-item label="枚举值" :span="2">
            <div v-if="data?.enumValues && data.enumValues.length > 0" class="enum-values">
              <el-tag
                v-for="(item, index) in data.enumValues"
                :key="index"
                class="enum-tag"
                type="primary"
              >
                {{ item.label }}({{ item.value }})
              </el-tag>
            </div>
            <span v-else>-</span>
          </el-descriptions-item>
        </template>
        
        <el-descriptions-item label="创建时间">
          {{ formatDateTime(data?.createTime) }}
        </el-descriptions-item>
        
        <el-descriptions-item label="更新时间">
          {{ formatDateTime(data?.updateTime) }}
        </el-descriptions-item>
        
        <el-descriptions-item label="描述" :span="2">
          <div class="description-content">
            {{ data?.description || '-' }}
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { ConfigAttributeInfo } from '@/api/IOT/protocolManage/configAttributeManage/types'

// Props定义
interface Props {
  visible: boolean
  data?: ConfigAttributeInfo
}

const props = defineProps<Props>()

// Emits定义
interface Emits {
  'update:visible': [value: boolean]
}

const emit = defineEmits<Emits>()

// 工具函数 - 获取数据类型文本
const getDataTypeText = (dataType?: string) => {
  const typeMap: Record<string, string> = {
    string: '字符串',
    int: '整数',
    float: '浮点数',
    boolean: '布尔值',
    enum: '枚举'
  }
  return typeMap[dataType || ''] || dataType || '-'
}

// 工具函数 - 获取数据类型标签类型
const getDataTypeTagType = (dataType?: string) => {
  const typeMap: Record<string, string> = {
    string: 'primary',
    int: 'success',
    float: 'warning',
    boolean: 'info',
    enum: 'danger'
  }
  return typeMap[dataType || ''] || 'info'
}

// 工具函数 - 格式化日期时间
const formatDateTime = (dateTime?: string) => {
  if (!dateTime) return '-'
  try {
    return new Date(dateTime).toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })
  } catch (error) {
    return dateTime
  }
}

// 事件处理函数
const handleClose = () => {
  emit('update:visible', false)
}
</script>

<style scoped>
.detail-content {
  padding: 0;
}

.dialog-footer {
  text-align: right;
}

.description-content {
  max-height: 100px;
  overflow-y: auto;
  word-break: break-all;
  white-space: pre-wrap;
}

.enum-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.enum-tag {
  margin: 0;
}
</style>